<template>
    <div :class="[{active, editMode}, 'tag-item']"
        @contextmenu.prevent="smartMousePress"
    >
        <span>{{tag.name}}</span>
        <div class="opt-icon">
            <i class="material-icons text-danger" data-action="remove-tag" v-if="editMode" @click="remove">remove_circle_outline</i>    
        </div>
        
    </div>
</template>

<script type="text/javascript">
import smartMouse from "./smart-mouse"

export default {
    mixins: [smartMouse],
    props: {
        editMode: {
            type: Boolean,
            default: false
        },
        tag: {
            type: Object,
            required: true
        },
        active: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            downTime: null,
            timer: null
        }
    },
    methods: {
        smartClick() {
          this.toggle();
        },
        smartMousePress() {
          this.$emit('editModeToggle', this.tag._id);
        },
        smartDblClick() {
          if (!this.editMode) {
              return;
          }
          this.$emit('renameTag', this.tag._id);
        },
        remove() {
            this.$emit('remove', this.tag);
        },
        toggle() {
            if (this.editMode) {
                return;
            }
            if (this.active) {
                this.$emit('unset', this.tag._id);
            } else {
                this.$emit('set', this.tag._id);
            }
        }
    },
    created() {
        // console.log(this);
    }
}
</script>

<style type="text/css">
.tag-item {
  position: relative;
  display: inline-block;
  margin: 5px;
  vertical-align: middle;
  border-radius: 8px;
  padding: .3em .6em;
  box-shadow: 0 1px 1px grey;
  cursor: pointer;
  user-select: none;
  background: white;
  /* -webkit-transition: background .3s, color .3s; */
     /* -moz-transition: background .3s, color .3s; */
      /* -ms-transition: background .3s, color .3s; */
       /* -o-transition: background .3s, color .3s; */
          /* transition: background .3s, color .3s; */
}

.tag-item.active:not(.editMode) {
  background: #dbc056;
  color: white;
}

.tag-item.editMode {
    animation: swing .5s;
    box-shadow: 0 0 1px grey;
}

.tag-item>.opt-icon {
    position: absolute;
    right: 0;
    top: 0;
    padding: .1em;
    line-height: 14px;
    height: 14px;
    -webkit-transform: translate(50%,-50%);
       -moz-transform: translate(50%,-50%);
        -ms-transform: translate(50%,-50%);
         -o-transform: translate(50%,-50%);
            transform: translate(50%,-50%);

}

.tag-item>.opt-icon>i {
    cursor: pointer;
    font-size: 12px;
}

</style>